<template>
  <div id="app">
    <header class="header">
      <div class="header-left">
        <div class="logo">
          <img src="./assets/logo.svg" alt="VueLens Logo">
          <span>VueLens</span>
        </div>
      </div>
      <div class="header-right">
        <button class="btn btn-export" @click="exportMarkdown">导出Markdown</button>
        <button class="btn btn-export" @click="exportHtml">导出HTML</button>
      </div>
    </header>
    
    <div class="container">
      <Home />
    </div>
    
    <footer class="footer">
      <p>VueLens - Vue组件文档生成工具</p>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Home from './views/Home.vue';

export default defineComponent({
  name: 'App',
  components: {
    Home
  },
  methods: {
    exportMarkdown() {
      fetch('/api/export/markdown')
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            alert(`Markdown文档已导出到: ${data.path}`);
          } else {
            alert(`导出失败: ${data.error}`);
          }
        })
        .catch(error => {
          console.error('导出Markdown文档失败:', error);
          alert('导出Markdown文档失败，请查看控制台日志');
        });
    },
    exportHtml() {
      fetch('/api/export/html')
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            alert(`HTML文档已导出到: ${data.path}`);
          } else {
            alert(`导出失败: ${data.error}`);
          }
        })
        .catch(error => {
          console.error('导出HTML文档失败:', error);
          alert('导出HTML文档失败，请查看控制台日志');
        });
    }
  }
});
</script>

<style lang="scss">
// 全局样式在main.scss文件中导入
</style> 